<template>
    <view>
        <!-- 实物商品 -->
        <view v-if="datainfo.productAttr != 2">
            <!-- 头部展示 -->
            <view v-if="datainfo.status == 0" class="text-center text-sm padding-top-sm" style="color: #ff1b0b">请在{{ show_time }}秒内付款，超时订单将自动取消…</view>
            <view v-if="datainfo.status == 1" class="text-center text-sm padding-top-sm" style="color: #ff1b0b">买家已付款, 等待商品发货</view>
            <view v-if="datainfo.status == 8" class="text-center text-sm padding-top-sm" style="color: #ff1b0b">退货申请已提交, 等待商家处理</view>
            <view class="pages" v-if="bool">
                <view class="topbox">
                    <view class="flexs align-center w-100">
                        <image :src="datainfo.path" class="topboxaddicon margin-right item-round"></image>
                        <view class="toptext">
                            <view class="text-df" v-if="datainfo.nickname">{{ datainfo.nickname }}</view>
                            <view class="text-dm padding-top-xs" v-if="datainfo.mobile">{{ datainfo.mobile }}</view>
                        </view>
                    </view>
                </view>
            </view>
            <!-- 门店详情 -->
            <view class="pages" v-if="datainfo.deliveryType == 2 && !bool">
                <view class="topbox">
                    <view class="flexs align-center">
                        <image src="https://yiyueuser.oss-cn-shenzhen.aliyuncs.com/2022-02-15/92b0b6c61ee6472c9f0d4961963c57a5-file" class="topboxaddicon margin-right"></image>
                        <view>
                            <view class="flexbox-sb">
                                <view class="toptext">
                                    <view class="text-black text-lg text-bold">{{ shopltlist.storeName }}</view>
                                    <view class="text-black text-df">{{ shoplist.telPhone }}</view>
                                </view>
                                <text class="text-df text-orange" style="border-bottom: 1rpx solid; height: 30rpx; min-width: 110rpx" @tap="onMobile">拨打电话</text>
                            </view>
                            <view class="text-df text-darkGray padding-top-xs" style="width: 550rpx">{{ shopltlist.location }}</view>
                        </view>
                    </view>
                </view>
            </view>
            <!-- 地址 -->
            <view class="pages" v-if="datainfo.deliveryType != 2">
                <view class="topbox">
                    <view class="flexs align-center">
                        <image src="/static/images/adds.png" class="topboxaddicon margin-right"></image>
                        <view>
                            <view class="toptext">
                                <view class="text-black text-lg text-bold">{{ datainfo.receiverName }}</view>
                                <view class="text-black text-df padding-left-xs">{{ datainfo.receiverPhone }}</view>
                            </view>
                            <view class="text-df text-darkGray padding-top-xs" style="width: 550rpx">{{ datainfo.shippingAddress }}</view>
                        </view>
                    </view>
                </view>
            </view>
            <!-- 商品 -->
            <view class="pages mt-20 pages_box">
                <view class="contenttext" v-if="index < indexs" v-for="(item, index) in datainfo.mallOrderItemDtos" :key="index">
                    <view class="flexs">
                        <image :src="item.productPic" class="contenttextimg margin-right"></image>
                        <view style="width: 470rpx">
                            <view class="text-black text-df text-bold text-tline">
                                {{ item.productName }}
                            </view>
                            <view class="flexs justify-between margin-top-sm text-darkGrey text-sm">
                                <view>{{ item.spType }}</view>
                                <view>x{{ item.productQuantity }}</view>
                            </view>
                            <view class="flexs justify-between centers text-df text-bold padding-top-xs text-red">
                                <view v-if="checkMaker && item.priceMaker && item.priceMaker != '0.00'" class="text-dg text-red margin-top-xs text-left">
                                    <view class="flexs">
                                        <view class="markerpic">
                                            <text class="text-orange">创客</text>
                                            <text>¥{{ item.priceMaker }}</text>
                                        </view>
                                        <view v-if="item.integration" class="margin-left-xs">
                                            <block v-if="item.productPrice != '0.00' && item.priceMaker != '0.00'">+</block>
                                            <image src="/static/images/douzi.png" style="width: 20rpx; height: 18rpx; margin: 0 10rpx"></image>
                                            <text>{{ item.integration || '0' }}</text>
                                        </view>
                                    </view>
                                </view>
                                <view v-else class="text-dg text-red margin-top-xs text-left">
                                    <view class="flexs">
                                        <block v-if="item.productPrice && item.productPrice > 0">
                                            ¥{{ item.productPrice }}
                                            <block v-if="item.integration">+</block>
                                        </block>
                                        <view v-if="item.integration" class="margin-left-xs">
                                            <image src="/static/images/douzi.png" style="width: 20rpx; height: 18rpx; margin: 0 10rpx"></image>
                                            <text>{{ item.integration || '0' }}</text>
                                        </view>
                                    </view>
                                </view>
                                <!-- <view wx:if="{{datainfo.status==6 || datainfo.status==8 || datainfo.status==9}}">{{datainfo.status==6 ? '已退款' : datainfo.status==8 ? '退款中' : '退款失败'}}</view> -->
                            </view>
                        </view>
                    </view>

                    <!-- 快递 -->

                    <view class="pages" v-if="(datainfo.status == 2 || datainfo.status == 3) && datainfo.deliveryType != 2">
                        <view class="topbox" style="position: relative; margin: 0">
                            <image src="https://yiyueuser.oss-cn-shenzhen.aliyuncs.com/kuaidi20211028165607.png" class="topboxaddicon margin-right"></image>
                            <view>
                                <view class="toptext">
                                    <view class="text-black text-lg">{{ steps[0].AcceptStation || '商品已经打包等待快递点揽收' }}</view>
                                </view>
                                <view class="text-df text-darkGray margin-right-xs margin-top-xs">{{ steps[0].AcceptTime || datainfo.mallOrderItemDtos[0].deliveryTime }}</view>
                            </view>
                            <!-- <view class="fuzhi text-sm text-darkGray" bindtap="fuzhifun" data-num="{{datainfo.orderSn||''}}">复制单号</view> -->
                            <view class="text-sm text-darkGray btn-wl" @tap="toDetail" :data-num="item.orderSn || ''" :data-id="item.id || ''">查看物流</view>
                        </view>
                    </view>
                </view>
                <view class="centers" @tap.stop.prevent="onChangeIndexs" v-if="datainfo.mallOrderItemDtos.length > 3">
                    <view class="index_text">{{ indexs == 3 ? '展开' : '收起' }}</view>
                    <image :src="imgUrl + (indexs == 3 ? 'bottom.png' : 'top.png')" class="icon-36"></image>
                </view>
                <!-- <view class="hr"></view> -->
            </view>
            <!-- 订单信息 -->
            <view class="pages">
                <view class="numbox margin-top-sm bg-white">
                    <view>
                        <view class="numboxlist">
                            <view class="numboxlistleft">
                                <image src="/static/images/jine.png" class="numboximg margin-right-xs"></image>
                                <view class="text-df text-darkGray">商品金额:</view>
                            </view>
                            <view class="text-df text-darkGrey" v-if="checkMaker && priceMaker">¥{{ datainfo.totalAmountOfGoods }}</view>
                            <view class="text-df text-darkGrey">¥{{ datainfo.totalAmountOfGoods }}</view>
                        </view>
                    </view>
                    <view v-if="datainfo.useIntegration">
                        <view class="numboxlist">
                            <view class="numboxlistleft">
                                <image src="/static/images/douzi.png" class="numboximg margin-right-xs" mode="aspectFit" style="width: 26rpx"></image>
                                <view class="text-df text-darkGray">意豆:</view>
                            </view>
                            <view class="text-df text-darkGrey">{{ datainfo.useIntegration }}</view>
                        </view>
                    </view>
                    <view>
                        <view class="numboxlist">
                            <view class="numboxlistleft">
                                <image src="/static/images/yunfei2.png" class="numboximg margin-right-xs"></image>
                                <view class="text-df text-darkGray">运费:</view>
                            </view>
                            <view class="text-df text-darkGrey">¥{{ datainfo.freightAmount }}</view>
                        </view>
                    </view>
                    <!-- <view>
        <view class="numboxlist">
          <view class="numboxlistleft">
            <image src="{{shopimgUrl + 'payclock.png'}}" class="numboximg margin-right-xs"></image>
            <view class="text-df text-darkGray">优惠券:</view>
          </view>
          <view class="text-df text-darkGrey">{{datainfo.couponAmountStr}}</view>
        </view>
      </view> -->
                    <view class="numboxlist numsbottom">
                        <view class="text-df text-black">订单总价:</view>
                        <view style="color: #ff1b0b">￥{{ datainfo.payAmount }}</view>
                    </view>
                </view>
            </view>
            <!-- 备注 -->
            <view class="pages">
                <view class="margin-top-sm remarks bg-white">
                    <view class="flexs align-center">
                        <image src="/static/images/remarks.png" class="remarksimg margin-left-sm"></image>
                        <view class="text-darkGray text-df txt-nowrap">订单备注：</view>
                    </view>
                    <view class="margin-right-sm text-df text-darkGrey txt-break">{{ datainfo.note || '暂无' }}</view>
                </view>
            </view>
            <!-- 订单标识 -->
            <view class="pages">
                <view class="margin-top-sm zscontent bg-white">
                    <view class="flexs justify-between">
                        <view class="flexs align-center">
                            <image src="/static/images/bianhao.png" class="remarksimg"></image>
                            <view class="text-darkGray text-df">订单编号:</view>
                        </view>
                        <view class="text-darkGrey text-df">{{ datainfo.orderSn }}</view>
                    </view>
                    <view class="flexs justify-between margin-top">
                        <view class="flexs align-center">
                            <image src="/static/images/time.png" class="remarksimg"></image>
                            <view class="text-darkGray text-df">下单时间:</view>
                        </view>
                        <view class="text-darkGrey text-df">
                            {{ datainfo.createTime }}
                        </view>
                    </view>
                    <view
                        class="flexs justify-between margin-top"
                        v-if="datainfo.status == 1 || datainfo.status == 2 || datainfo.status == 3 || datainfo.status == 6 || datainfo.status == 8 || datainfo.status == 9"
                    >
                        <view class="flexs align-center">
                            <image src="/static/images/zhifushij.png" class="remarksimg"></image>
                            <view class="text-darkGray text-df">支付时间:</view>
                        </view>
                        <view class="text-darkGrey text-df">
                            {{ datainfo.paymentTime }}
                        </view>
                    </view>
                    <view
                        class="flexs justify-between margin-top"
                        v-if="datainfo.status == 1 || datainfo.status == 2 || datainfo.status == 3 || datainfo.status == 6 || datainfo.status == 8 || datainfo.status == 9"
                    >
                        <view class="flexs align-center">
                            <image src="/static/images/1.png" class="remarksimg"></image>
                            <view class="text-darkGray text-df">支付方式:</view>
                        </view>
                        <view class="text-darkGrey text-df" v-if="datainfo.payType == 1">微信支付</view>
                        <view class="text-darkGrey text-df" v-if="datainfo.payType == 2">余额支付</view>
                        <view class="text-darkGrey text-df" v-if="datainfo.payType == 3">意豆兑换</view>
                    </view>
                    <view class="flexs justify-between margin-top" v-if="datainfo.status == 3">
                        <view class="flexs align-center">
                            <image src="/static/images/time.png" class="remarksimg"></image>
                            <view class="text-darkGray text-df">{{ datainfo.deliveryType == 2 ? '自提时间:' : '收货时间:' }}</view>
                        </view>
                        <view class="text-darkGrey text-df">
                            {{ datainfo.receiptTime || '' }}
                        </view>
                    </view>
                </view>
            </view>

            <!-- 客服 -->
            <view class="pages" v-if="!bool">
                <view class="margin-top-sm zscontents bg-white" @tap="openkefu">
                    <view class="flexs justify-center">
                        <image src="/static/images/kefu.png" style="width: 56rpx; height: 56rpx; margin: 0 auto"></image>
                    </view>
                    <view class="text-center text-darkGray text-df margin-top-sm">联系客服</view>
                </view>
            </view>
            <!-- 联系用户 -->
            <view class="pages" v-if="bool">
                <view class="margin-top-sm zscontents bg-white" @tap="onMobile">
                    <view class="flexs justify-center">
                        <image
                            src="https://yiyuestore.oss-cn-shenzhen.aliyuncs.com/2022-03-11/79946dd4c21d4f29aa55a44c05f88070-files"
                            style="width: 56rpx; height: 56rpx; margin: 0 auto"
                        ></image>
                    </view>
                    <view class="text-center text-darkGray text-df margin-top-sm">联系用户</view>
                </view>
            </view>
            <!-- 底部按钮 -->
            <view class="subbtn subbtn1" v-if="datainfo.status == 3 || datainfo.status == 4 || datainfo.status == 6" @tap="czorder" data-type="5">删除订单</view>
            <block v-if="datainfo.deliveryType == 2 && datainfo.status == 2 && bool">
                <!-- 自提核销按钮 -->
                <view v-if="bool && charge && !cancel" class="subbtn-o" @tap="getcode">扫码核销</view>
                <view class="subbtn-o" v-if="cancel && charge" @tap="getOrder">确认核销</view>
            </block>
            <block v-else>
                <view class="subbtn-o" v-if="datainfo.status == 2 && datainfo.deliveryType != 2" @tap="czorder" data-type="4">确认收货</view>
            </block>
            <view class="subbtn-o" v-if="datainfo.status == 6 || datainfo.status == 8 || datainfo.status == 9" @tap="czorder" data-type="7">退款进度</view>
            <view class="pages margin-top-xl margin-bottom-xl item-around" v-if="datainfo.status == 0 || datainfo.status == 1">
                <view class="sunbtn1" v-if="datainfo.status == 0" @tap="czorder" data-type="1">取消订单</view>
                <view class="sunbtn2" v-if="datainfo.status == 0" @tap="czorder" data-type="2">去付款</view>
                <block v-if="datainfo.status == 1">
                    <view class="sunbtn1" v-if="datainfo.productType == 1" @tap="czorder" data-type="6">申请退款</view>
                    <view class="sunbtn2" v-if="datainfo.remindType == 1" @tap="czorder" data-type="3">提醒发货</view>
                    <view class="sunbtn2" v-if="datainfo.remindType == 2">已提醒</view>
                </block>
            </view>
            <view class="pages margin-top-xl margin-bottom-xl item-around" v-if="datainfo.status == 2 && datainfo.deliveryType == 2 && !bool">
                <view class="sunbtn3" v-if="datainfo.status == 2" @tap="czorder" data-type="9">已提货</view>
                <view class="sunbtn2" v-if="datainfo.deliveryType == 2" @tap="czorder" data-type="8">提货码</view>
            </view>
        </view>
        <!-- 虚拟商品 -->
        <view v-if="datainfo.productAttr == 2">
            <!-- 头部展示 -->
            <view v-if="datainfo.status == 0" class="text-center text-sm padding-top-sm" style="color: #ff1b0b">请在{{ show_time }}秒内付款，超时订单将自动取消…</view>
            <view v-if="datainfo.status == 1" class="text-center text-sm padding-top-sm" style="color: #2cc91e">购买成功，正在为您充值，请注意查收...</view>
            <view v-if="datainfo.status == 3" class="text-center text-sm padding-top-sm" style="color: #333">开通成功，购买权益已充值到账，注意查收</view>
            <view v-if="datainfo.status == 6" class="text-center text-sm padding-top-sm" style="color: #ff1b0b">开通失败，支付金额会原路退回，请重新购买</view>
            <!-- 商品 -->
            <view class="pages mt-20 pages_box">
                <view class="contenttext" v-if="index < indexs" v-for="(item, index) in datainfo.mallOrderItemDtos" :key="index">
                    <view class="flexs">
                        <image :src="item.productPic" class="contenttextimg margin-right"></image>
                        <view style="width: 470rpx">
                            <view class="text-black text-df text-bold text-tline">
                                {{ item.productName }}
                            </view>
                            <view class="flexs justify-between margin-top-sm text-darkGrey text-sm">
                                <view>{{ item.spType }}</view>
                                <view>x{{ item.productQuantity }}</view>
                            </view>
                            <view class="flexs justify-between centers text-df text-bold padding-top-xs text-red">
                                <view v-if="checkMaker && item.priceMaker != '0.00' && item.priceMaker" class="text-dg text-red margin-top-xs text-left">
                                    <view class="flexs">
                                        <view class="markerpic">
                                            <text class="text-orange">创客</text>
                                            <text v-if="item.priceMaker">¥{{ item.priceMaker }}</text>
                                        </view>
                                        <view v-if="item.integration" class="margin-left-xs">
                                            <block v-if="item.productPrice != '0.00' && item.priceMaker != '0.00 + '"></block>
                                            <image src="/static/images/douzi.png" style="width: 20rpx; height: 18rpx; margin: 0 10rpx"></image>
                                            <text>{{ item.integration || '0' }}</text>
                                        </view>
                                    </view>
                                </view>
                                <view v-else class="text-dg text-red margin-top-xs text-left">
                                    <view class="flexs">
                                        <block v-if="item.productPrice">
                                            {{ item.productPrice == '0.00' ? '' : '¥' + item.productPrice + ' +' }}
                                            <!-- <block wx:if="{{item.integration}}">+</block> -->
                                        </block>
                                        <view v-if="item.integration" class="margin-left-xs">
                                            <image src="/static/images/douzi.png" style="width: 20rpx; height: 18rpx; margin: 0 10rpx"></image>
                                            <text>{{ item.integration || '0' }}</text>
                                        </view>
                                    </view>
                                </view>
                                <view v-if="datainfo.status == 6 || datainfo.status == 8 || datainfo.status == 9">
                                    {{ datainfo.status == 6 ? '已退款' : datainfo.status == 8 ? '退款中' : '退款失败' }}
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="centers" @tap.stop.prevent="onChangeIndexs" v-if="datainfo.mallOrderItemDtos.length > 3">
                    <view class="index_text">{{ indexs == 3 ? '展开' : '收起' }}</view>
                    <image :src="imgUrl + (indexs == 3 ? 'bottom.png' : 'top.png')" class="icon-36"></image>
                </view>
                <view class="hr"></view>
                <!-- 账号信息 -->
                <view class="userMsg" v-if="datainfo.mallOrderItemDtos[0].rechargeType && datainfo.mallOrderItemDtos[0].rechargeNumber">
                    <view class="flexs justify-between mt-20">
                        <view class="msgTie">充值账号信息</view>
                        <view></view>
                    </view>
                    <view class="flexs justify-between mt-20">
                        <view class="msgText1">账号类型</view>
                        <view class="msgText2">
                            {{ datainfo.mallOrderItemDtos[0].rechargeType == 2 ? '手机号码' : datainfo.mallOrderItemDtos[0].rechargeType == 1 ? 'QQ号码' : '其他' }}
                        </view>
                    </view>
                    <view class="flexs justify-between mt-20">
                        <view class="msgText1">开通账号</view>
                        <view class="msgText2">{{ datainfo.mallOrderItemDtos[0].rechargeNumber }}</view>
                    </view>
                </view>
            </view>
            <!-- 订单金额 -->
            <view class="pages">
                <view class="numbox margin-top-sm bg-white">
                    <view>
                        <view class="numboxlist">
                            <view class="numboxlistleft">
                                <image :src="imgUrl + 'xn-jine.png'" class="numboximg margin-right-xs"></image>
                                <view class="text-df text-darkGray">订单金额:</view>
                            </view>
                            <view class="text-df text-darkGrey" v-if="checkMaker && priceMaker">¥{{ datainfo.payAmount }}</view>
                            <view class="text-df text-darkGrey" v-else>¥{{ datainfo.payAmount }}</view>
                        </view>
                    </view>
                    <view v-if="datainfo.useIntegration">
                        <view class="numboxlist">
                            <view class="numboxlistleft">
                                <image src="/static/images/douzi.png" class="numboximg margin-right-xs" mode="aspectFit" style="width: 26rpx"></image>
                                <view class="text-df text-darkGray">意豆:</view>
                            </view>
                            <view class="text-df text-darkGrey">{{ datainfo.useIntegration }}</view>
                        </view>
                    </view>
                    <view class="numboxlist numsbottom">
                        <view class="text-df text-black">应付金额:</view>
                        <view style="color: #ff1b0b">￥{{ datainfo.payAmount }}</view>
                    </view>
                </view>
            </view>
            <!-- 备注 -->
            <view class="pages" v-if="datainfo.note">
                <view class="margin-top-sm remarks bg-white">
                    <view class="flexs align-center">
                        <image src="/static/images/remarks.png" class="remarksimg margin-left-sm"></image>
                        <view class="text-darkGray text-df txt-nowrap">订单备注：</view>
                    </view>
                    <view class="margin-right-sm text-df text-darkGrey txt-break">{{ datainfo.note || '暂无' }}</view>
                </view>
            </view>
            <!-- 订单标识 -->
            <view class="pages">
                <view class="margin-top-sm zscontent bg-white">
                    <view class="flexs justify-between">
                        <view class="flexs align-center">
                            <image :src="imgUrl + 'xn-num.png'" class="remarksimg"></image>
                            <view class="text-darkGray text-df">订单编号:</view>
                        </view>
                        <view class="text-darkGrey text-df">{{ datainfo.orderSn }}</view>
                    </view>
                    <view class="flexs justify-between margin-top">
                        <view class="flexs align-center">
                            <image :src="imgUrl + 'xn-ordertime.png'" class="remarksimg"></image>
                            <view class="text-darkGray text-df">下单时间:</view>
                        </view>
                        <view class="text-darkGrey text-df">
                            {{ datainfo.createTime }}
                        </view>
                    </view>
                    <view
                        class="flexs justify-between margin-top"
                        v-if="datainfo.status == 1 || datainfo.status == 2 || datainfo.status == 3 || datainfo.status == 6 || datainfo.status == 8 || datainfo.status == 9"
                    >
                        <view class="flexs align-center">
                            <image :src="imgUrl + 'xn-paytime.png'" class="remarksimg"></image>
                            <view class="text-darkGray text-df">支付时间:</view>
                        </view>
                        <view class="text-darkGrey text-df">
                            {{ datainfo.paymentTime }}
                        </view>
                    </view>
                    <view
                        class="flexs justify-between margin-top"
                        v-if="datainfo.status == 1 || datainfo.status == 2 || datainfo.status == 3 || datainfo.status == 6 || datainfo.status == 8 || datainfo.status == 9"
                    >
                        <view class="flexs align-center">
                            <image :src="imgUrl + 'xn-paytype.png'" class="remarksimg"></image>
                            <view class="text-darkGray text-df">支付方式:</view>
                        </view>
                        <view class="text-darkGrey text-df" v-if="datainfo.payType == 1">微信支付</view>
                        <view class="text-darkGrey text-df" v-if="datainfo.payType == 2">余额支付</view>
                        <view class="text-darkGrey text-df" v-if="datainfo.payType == 3">意豆兑换</view>
                    </view>
                </view>
            </view>
            <!-- 客服 -->
            <view class="pages">
                <view class="margin-top-sm zscontents bg-white" @tap="openkefu">
                    <view class="flexs justify-center">
                        <image src="/static/images/kefu.png" style="width: 56rpx; height: 56rpx; margin: 0 auto"></image>
                    </view>
                    <view class="text-center text-darkGray text-df margin-top-sm">联系客服</view>
                </view>
            </view>
            <!-- 底部按钮 -->
            <view class="subbtn subbtn1" @tap="czorder" data-type="5" v-if="datainfo.status == 3 || datainfo.status == 4 || datainfo.status == 6">删除订单</view>
            <view class="pages margin-top-xl margin-bottom-xl item-around" v-if="datainfo.status == 0 || datainfo.status == 1">
                <view class="sunbtn1" @tap="czorder" data-type="1" v-if="datainfo.status == 0">取消订单</view>
                <view class="sunbtn2" @tap="czorder" data-type="2" v-if="datainfo.status == 0">前往付款</view>
                <block v-if="datainfo.status == 1">
                    <view class="sunbtn2" v-if="datainfo.remindType == 1" @tap="czorder" data-type="3">提醒发货</view>
                    <view class="sunbtn2" v-if="datainfo.remindType == 2">已提醒</view>
                </block>
            </view>
        </view>
        <!-- 客服弹窗 -->
        <view :class="'modal bottom-modal ' + (show1 ? 'show' : '')" @touchmove.stop.prevent="preventTouchMove">
            <view class="dialog dialog-goods" style="border-radius: 40rpx 40rpx 0 0" catchtap>
                <view class="bg-white padding-xl text-center">
                    <view class="padding-top-xs text-xl text-bold">联系客服</view>
                    <view class="padding-tb text-df text-darkGrey" style="border-bottom: 1px solid #cccccc">服务时间：9:00-22:00</view>
                    <view class="padding-tb text-df text-darkGrey" @tap.stop.prevent="callphone">0755-8465-9719</view>
                    <view class="show_box radiues text-white text-df bg-orange text-center" @tap="getshow1">取消</view>
                </view>
            </view>
        </view>
        <!-- 联系用户弹窗 -->
        <van-overlay :show="showoverlay" @click="onClickHide">
            <view class="overlaybox">
                <view class="overlaybox1" @tap.stop.prevent="goMobile">
                    <block v-if="datainfo.deliveryType == 2 && !bool">{{ shoplist.telPhone || '' }}</block>
                    <block v-else>{{ datainfo.mobile || '' }}</block>
                </view>
                <view class="overlaybox2" @tap.stop.prevent="onClickHide">取消</view>
            </view>
        </van-overlay>
    </view>
</template>

<script>
const _request = require('../../utils/request.js');

const app = getApp();

const moment = require('../../utils/moment.min');

var timerse;
export default {
    data() {
        return {
            show1: false,
            orderid: '',

            //订单id
            datainfo: {
                productAttr: 0,
                status: 0,
                path: '',
                nickname: '',
                mobile: '',
                deliveryType: 0,
                receiverName: '',
                receiverPhone: '',
                shippingAddress: '',
                mallOrderItemDtos: [],
                totalAmountOfGoods: '',
                useIntegration: '',
                freightAmount: '',
                payAmount: '',
                note: '',
                orderSn: '',
                createTime: '',
                paymentTime: '',
                payType: 0,
                receiptTime: '',
                productType: 0,
                remindType: 0
            },

            //订单详情
            shopimgUrl: app.globalData.shopimgUrl,

            imgUrl: app.globalData.imgUrl,

            // 全局img路径
            show_time: '',

            //倒计时
            isMaker: 0,

            orderSn: '',
            userId2: '',

            //用户端userId
            cancel: '',

            charge: true,
            checkMaker: false,

            //是否是创客用户
            orderPrice: 0,

            //商品金额
            bool: false,

            // 控制是否显示核销扫码按钮(区分自提和商城订单)
            clone_item: null,

            priceMaker: 0,

            //创客商品价格
            shopltlist: {
                storeName: '',
                location: ''
            },

            //门店详情
            shoplist: {
                telPhone: ''
            },

            //门店详情获取手机号
            indexs: 3,

            //控制展示条数
            steps: [],

            // 物流信息
            id: '',

            // 获取商品id物流
            stepsCode: '',

            // 物流code
            showoverlay: false,

            AcceptStation: '',
            AcceptTime: '',
            deliveryTime: '',
            rechargeType: '',
            rechargeNumber: ''
        };
    },
    onLoad: function (options) {
        this.setData({
            orderid: options?.orderid,
            isMaker: options?.isMaker,
            orderSn: options?.orderSn,
            cancel: options?.cancel,
            userId2: options?.userId,
            bool: options?.bool
        });
        this.getinfo();
    },
    onShow: function () {
        this.setData({
            checkMaker: uni.getStorageSync('maker')?.ismaker || false
        });
    },
    methods: {
        //控制展示条数
        onChangeIndexs() {
            this.setData({
                indexs: this.indexs == 3 ? 100 : 3
            });
        },

        // 获取物流信息
        getInfoSteps() {
            let url = '/mall-order-item/orderLogisticsTracking';
            console.log(this);
            console.log(this.datainfo.mallOrderItemDtos[0].id);

            _request
                .get(
                    url,
                    {
                        id: this.datainfo.mallOrderItemDtos[0].id
                    },
                    app.globalData.mallType
                )
                .then((res) => {
                    if (res.data.code === 200) {
                        let trace = res.data.data?.Traces?.filter((item) => {
                            item.text = item.AcceptStation;
                            item.desc = item.AcceptTime;
                            return item;
                        });
                        this.setData({
                            steps: trace?.reverse(),
                            stepsCode: res.data.data?.LogisticCode
                        });
                    } else {
                        uni.showToast({
                            title: res.data.message || '请求失败',
                            icon: 'none'
                        });
                    }
                });
        },

        getinfo() {
            const vm = this;

            _request
                .get(
                    '/mall-order/getOrderDetails',
                    {
                        orderSn: this.orderSn,
                        userId: uni.getStorageSync('userid')
                    },
                    app.globalData.mallType
                )
                .then((res) => {
                    if (res.data.code === 200) {
                        var _info = res.data.data;
                        let price = 0;
                        let priceMaker = 0;

                        if (_info.productAttr != 2) {
                            _info.mallOrderItemDtos.forEach((e) => {
                                e.spObj = JSON.parse(e.specification);
                                let list = [];
                                e.spObj.forEach((item) => {
                                    list.push(item.key + ':' + item.value);
                                });
                                e.spType = list.join(',');
                                price += Number(e.productPrice);
                                priceMaker += Number(e.priceMaker);
                            });
                        } // 商品金额=总价-运费

                        _info.goodsAmoun = (_info.payAmount - _info.freightAmount).toFixed(2);
                        clearInterval(timerse);
                        this.gettimerse(); //倒计时

                        this.setData(
                            {
                                datainfo: _info,
                                orderPrice: price,
                                priceMaker: priceMaker
                            },
                            () => {
                                vm.getInfoSteps();
                            }
                        );

                        if (this.datainfo.storeId) {
                            this.getStoreInfo();
                            this.getContant();
                        }
                    } else {
                        uni.showToast({
                            title: res.data.message,
                            icon: 'none'
                        });
                    }
                });
        },

        //门店详情
        getStoreInfo() {
            _request
                .postObj('/storeManage/getStoreInfo', {
                    storeId: this.datainfo.storeId,
                    userId: uni.getStorageSync('userid')
                })
                .then((res) => {
                    if (res.data.code == 200) {
                        this.setData({
                            shopltlist: res.data.data
                        });
                    }
                });
        },

        getContant() {
            // 门店详情
            let vm = this;
            uni.request({
                url: app.globalData.baseurl + app.globalData.userPrefix + '/storeManage/contact',
                method: 'get',
                data: {
                    storeId: this.datainfo.storeId,
                    userId: uni.getStorageSync('userid')
                },
                header: {
                    'Content-Type': 'application/json',
                    token: uni.getStorageSync('token')
                },
                success: function (res) {
                    vm.setData({
                        shoplist: res.data.data
                    });
                }
            });
        },

        gettimerse() {
            timerse = setInterval(() => {
                let time = new moment(this.datainfo.createTime).valueOf(); // console.log(time);

                let createordertime = time / 1000 + 86400; //结束待支付时间

                createordertime--;
                let now = new Date().getTime() / 1000; //当前时间换时间戳

                let diff = parseInt(createordertime - now); // console.log(diff);

                if (diff < 0) {
                    clearInterval(timerse); // wx.navigateBack({ delta: 1 })
                } else {
                    let date = this.formattime(diff * 1000); // console.log(date);

                    this.setData({
                        show_time: date
                    });
                }
            }, 1000);
        },

        //格式化时间
        formattime(time) {
            //格式化时间戳
            var leave1 = time % (24 * 3600 * 1000); //计算小时

            var hour = Math.floor(leave1 / (3600 * 1000));
            var leave2 = leave1 % (3600 * 1000); //计算分钟

            var minute = Math.floor(leave2 / (60 * 1000));
            var leave3 = leave2 % (60 * 1000); //计算秒

            var second = Math.round(leave3 / 1000) == '60' ? '00' : Math.round(leave3 / 1000);
            return [hour, minute, second].map(this.formatNumber).join(':');
        },

        formatNumber(n) {
            n = n.toString();
            return n[1] ? n : '0' + n;
        },

        // 操作
        czorder(e) {
            var _item = this.datainfo;
            var that = this;

            if (e.currentTarget.dataset.type == 1) {
                //点击取消订单
                uni.showModal({
                    title: '温馨提示',
                    content: '确认取消订单?',
                    cancelText: '取消',
                    confirmText: '确认',

                    success(res) {
                        if (res.confirm) {
                            _request
                                .postObj(
                                    '/mall-order/cancelOrder',
                                    {
                                        orderSn: _item.orderSn
                                    },
                                    app.globalData.mallType
                                )
                                .then((res) => {
                                    console.log(res);

                                    if (res.data.code === 200) {
                                        that.getinfo();
                                        uni.navigateBack({
                                            delta: -1
                                        });
                                    } else {
                                        uni.showToast({
                                            title: res.data.message,
                                            icon: 'none'
                                        });
                                    }
                                });
                        }
                    }
                });
            } else if (e.currentTarget.dataset.type == 2) {
                //去付款
                uni.navigateTo({
                    url:
                        '/shopingmall/payment/payment?orderId=' +
                        _item.id +
                        '&orderSn=' +
                        _item.orderSn +
                        '&realityPayPrice=' +
                        _item.payAmount +
                        '&createordertime=' +
                        _item.createTime +
                        '&type=' +
                        _item.type +
                        '&isLarge=false'
                });
            } else if (e.currentTarget.dataset.type == 3) {
                //提醒发货
                _request
                    .postObj(
                        '/mall-order/remindDelivery',
                        {
                            orderSn: _item.orderSn // userid: wx.getStorageSync('userid'),
                        },
                        app.globalData.mallType
                    )
                    .then((res) => {
                        console.log(res);

                        if (res.data.code === 200) {
                            uni.showToast({
                                title: '已提醒商家发货~',
                                icon: 'none'
                            });
                            uni.navigateBack({
                                delta: -1
                            });
                        } else {
                            uni.showToast({
                                title: res.data.message,
                                icon: 'none'
                            });
                        }
                    });
            } else if (e.currentTarget.dataset.type == 4) {
                //确认收货
                uni.showModal({
                    title: '温馨提示',
                    content: '您确认收到了吗?',
                    cancelText: '取消',
                    confirmText: '确认',

                    success(res) {
                        if (res.confirm) {
                            _request
                                .postObj(
                                    '/mall-order/confirmReceipt',
                                    {
                                        orderSn: _item.orderSn
                                    },
                                    app.globalData.mallType
                                )
                                .then((res) => {
                                    console.log(res);

                                    if (res.data.code === 200) {
                                        that.getinfo();
                                        uni.navigateBack({
                                            delta: -1
                                        });
                                    } else {
                                        uni.showToast({
                                            title: res.data.message,
                                            icon: 'none'
                                        });
                                    }
                                });
                        }
                    }
                });
            } else if (e.currentTarget.dataset.type == 5) {
                //删除订单
                uni.showModal({
                    title: '温馨提示',
                    content: '请确认是否删除订单?',
                    cancelText: '取消',
                    confirmText: '确认',

                    success(res) {
                        if (res.confirm) {
                            _request
                                .postObj(
                                    '/mall-order/deleteOrder',
                                    {
                                        orderSn: _item.orderSn
                                    },
                                    app.globalData.mallType
                                )
                                .then((res) => {
                                    console.log(res);

                                    if (res.data.code === 200) {
                                        that.getinfo();
                                        uni.navigateBack({
                                            delta: -1
                                        });
                                    } else {
                                        uni.showToast({
                                            title: res.data.message,
                                            icon: 'none'
                                        });
                                    }
                                });
                        }
                    }
                });
            } else if (e.currentTarget.dataset.type == 6) {
                //申请退款
                // isAudit 是否已审核订单退款 0 未审核 1 已审核
                if (_item.isAudit == 0) {
                    uni.navigateTo({
                        url: './refund/index',
                        success: (res) => {
                            res.eventChannel.emit('acceptData', this.datainfo);
                        }
                    });
                } else if (_item.isAudit == 1) {
                    uni.showModal({
                        title: '温馨提示',
                        content: '亲~ 很抱歉，由于物流信息延迟，没能及时更新订单状态，您的订单已发货，暂不能再取消订单了，感谢理解~',
                        cancelText: '联系客服',
                        confirmText: '我知道了',

                        success(res) {
                            if (res.confirm) {
                                uni.navigateBack({
                                    delta: -1
                                });
                            } else {
                                that.setData({
                                    show1: !that.show1
                                });
                            }
                        },

                        fail: function () {
                            console.log('失败');
                        }
                    });
                }
            } else if (e.currentTarget.dataset.type == 7) {
                //退款进度
                this.setData({
                    datainfo: { ...this.datainfo, isView: true }
                });
                uni.navigateTo({
                    url: './refund/index',
                    success: (res) => {
                        res.eventChannel.emit('acceptData', this.datainfo);
                    }
                });
            } else if (e.currentTarget.dataset.type == 8) {
                // 提货码
                uni.navigateTo({
                    url: './cancel/cancel?orderSn=' + _item.orderSn + '&storeId=' + _item.storeId
                });
            } else if (e.currentTarget.dataset.type == 9) {
                // 已提货
                uni.showModal({
                    title: '亲~请确认您是否已经提到宝贝了',
                    cancelText: '还没有',
                    confirmText: '提到了',

                    success(res) {
                        if (res.confirm) {
                            _request
                                .postObj(
                                    '/mall-order/confirmReceipt',
                                    {
                                        orderSn: _item.orderSn
                                    },
                                    app.globalData.mallType
                                )
                                .then((res) => {
                                    if (res.data.code === 200) {
                                        that.getinfo();
                                        uni.navigateBack({
                                            delta: -1
                                        });
                                    } else {
                                        uni.showToast({
                                            title: res.data.message,
                                            icon: 'none'
                                        });
                                    }
                                });
                        }
                    }
                });
            }
        },

        getOrder() {
            // 确认核销
            _request
                .postObj(
                    '/mall-order/writeOffAnOrder',
                    {
                        orderSn: this.orderSn,
                        storeId: uni.getStorageSync('storeId'),
                        userId: this.userId2
                    },
                    app.globalData.mallType
                )
                .then((res) => {
                    if (res.data.code === 200) {
                        uni.showToast({
                            title: res.data.message,
                            icon: 'none'
                        }); //核销按钮消失

                        this.setData({
                            charge: false
                        });
                    } else {
                        uni.showToast({
                            title: res.data.message,
                            icon: 'none'
                        });
                    }
                });
        },

        // 操作
        getcode() {
            let vm = this;
            uni.scanCode({
                //扫描API
                success: function (res) {
                    console.log(res);

                    if (res.result) {
                        let parms = res.result.split('&');
                        const orderSn = parms[0]?.split('=')[1] || '';
                        const userId = parms[1]?.split('=')[1] || '';
                        vm.setData(
                            {
                                orderSn: orderSn,
                                userId2: userId
                            },
                            () => {
                                vm.getOrder();
                            }
                        );
                    } else {
                        uni.showToast({
                            title: '识别失败，请扫描正确的核销码',
                            icon: 'none',
                            duration: 1500
                        });
                    }
                },
                fail: function (res) {
                    uni.showToast({
                        title: '识别失败，请扫描正确的核销码',
                        icon: 'none',
                        duration: 1500
                    });
                }
            });
        },

        fuzhifun(e) {
            uni.setClipboardData({
                data: e.currentTarget.dataset.num,
                success: function (res) {
                    // wx.showModal({
                    //   title: '提示',
                    //   content: '复制成功',
                    //   showCancel: false
                    // });
                }
            });
        },

        //查看物流信息
        toDetail(e) {
            uni.navigateTo({
                url: `./logistics/index?id=${e.currentTarget.dataset.id || ''}` + '&time=' + this.datainfo.mallOrderItemDtos[0]?.deliveryTime
            });
        },

        openkefu() {
            this.setData({
                show1: !this.show1
            });
        },

        getshow1() {
            this.setData({
                show1: !this.show1
            });
        },

        callphone() {
            uni.makePhoneCall({
                phoneNumber: '0755-8465-9719'
            });
        },

        // 显示电话
        onMobile(e) {
            this.setData({
                showoverlay: true
            });
        },

        // 隐藏电话
        onClickHide() {
            this.setData({
                showoverlay: false
            });
        },

        // 拨打电话
        goMobile() {
            if (this.datainfo.deliveryType == 2 && !this.bool) {
                uni.makePhoneCall({
                    phoneNumber: this.shoplist.telPhone
                });
            } else {
                uni.makePhoneCall({
                    phoneNumber: this.datainfo.mobile
                });
            }
        },

        preventTouchMove() {
            console.log('占位：函数 preventTouchMove 未声明');
        }
    }
};
</script>
<style>
page {
    background: #fbfbfb;
}

.pages {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    background-color: #fbfbfb;
}

.fuzhi {
    position: absolute;
    right: 30rpx;
    top: 30rpx;
}

.topbox {
    width: 710rpx;
    height: 180rpx;
    background: #fff;
    margin-top: 20rpx;
    /* padding-top: 20rpx; */
    display: flex;
    align-items: center;
    border-radius: 12rpx;
}

.item-round {
    border-radius: 50%;
}

.topboxaddicon {
    width: 80rpx;
    height: 80rpx;
    margin-left: 20rpx;
}

.toptext {
    display: flex;
    flex-wrap: wrap;
}

.toptext .text-black {
    max-width: 450rpx;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

.contenttext {
    width: 710rpx;
    padding: 30rpx 0;
    background: #fff;
    /* margin-top: 20rpx; */
    border-radius: 4rpx;
    box-shadow: 2rpx 2rpx 8rpx 0rpx rgba(236, 236, 236, 0.4);
    display: flex;
    flex-direction: column;
}

.contenttextimg {
    width: 160rpx;
    height: 180rpx;
}

.douzi {
    width: 32rpx;
    height: 32rpx;
    margin-right: 10rpx;
}

.remarks {
    width: 710rpx;
    /* height: 100rpx; */
    box-shadow: 2rpx 2rpx 8rpx 0rpx rgba(236, 236, 236, 0.4);
    border-radius: 12rpx;
    align-items: center;
    display: flex;
    padding: 14rpx 0;
    justify-content: space-between;
}

.txt-nowrap {
    white-space: nowrap;
}

.txt-break {
    word-break: break-word;
}

.remarksimg {
    width: 32rpx;
    height: 32rpx;
    margin-right: 6rpx;
}

.numbox {
    width: 710rpx;
    /* height: 320rpx; */
    box-shadow: 2rpx 2rpx 8rpx 0rpx rgba(236, 236, 236, 0.4);
    border-radius: 12rpx;
    display: flex;
    flex-flow: column;
}

.numboximg {
    width: 32rpx;
    height: 32rpx;
}

.numboxlist {
    width: 670rpx;
    margin: 16rpx auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.numboxlistleft {
    display: flex;
    align-items: center;
}

.numsbottom {
    border-top: 1rpx solid #cacaca;
    padding: 20rpx 0;
    margin: 20rpx auto;
}

.zscontent {
    width: 670rpx;
    padding: 30rpx;
}

.subbtn {
    width: 670rpx;
    height: 88rpx;
    border-radius: 44rpx;
    margin: 60rpx auto;
    text-align: center;
    line-height: 88rpx;
    color: #fff;
    font-size: 32rpx;
}

.subbtn-o {
    width: 670rpx;
    height: 88rpx;
    border-radius: 44rpx;
    margin: 60rpx auto;
    text-align: center;
    line-height: 88rpx;
    color: #fff;
    background-color: #ff8722;
    font-size: 32rpx;
}

.subbtn1 {
    background: #cfcfcf;
    color: #fff;
}

.show_box {
    width: 650rpx;
    line-height: 90rpx;
}

.zscontents {
    width: 670rpx;
    padding: 20rpx;
    display: flex;
    flex-direction: column;
}

.sunbtn1 {
    background: #cfcfcf;
    border-radius: 44rpx;
    text-align: center;
    font-size: 32rpx;
    color: #fff;
    padding: 18rpx 74rpx;
}

.sunbtn2 {
    background: #ff8722;
    border-radius: 44rpx;
    text-align: center;
    font-size: 32rpx;
    color: #fff;
    padding: 18rpx 74rpx;
}

.sunbtn3 {
    text-align: center;
    border-radius: 44rpx;
    border: 1rpx solid #ff8722;
    color: #ff8722;
    padding: 18rpx 74rpx;
    font-size: 32rpx;
}

.notebox {
    width: 250rpx;
    word-wrap: break-word;
}

.pages.item-around {
    justify-content: space-around;
}

.pages .btn-wl {
    position: absolute;
    right: 16rpx;
    margin-top: 24rpx;
    border-radius: 44rpx;
    text-align: center;
    font-size: 24rpx;
    color: #ff8722;
    padding: 6rpx 24rpx;
    border: 1px solid #ff8722;
}

.index_text {
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 34rpx;
}

.pages_box {
    background-color: #fff;
}

/* 底部电话弹窗 */

.overlaybox {
    position: absolute;
    bottom: 50rpx;
    padding: 0 20rpx;
}

.overlaybox1 {
    width: 710rpx;
    height: 100rpx;
    background-color: white;
    border-radius: 80rpx;
    line-height: 100rpx;
    text-align: center;
    color: #007aff;
}

.overlaybox2 {
    width: 710rpx;
    height: 100rpx;
    background-color: white;
    line-height: 100rpx;
    text-align: center;
    line-height: 100rpx;
    margin-top: 30rpx;
    border-radius: 80rpx;
    color: #007aff;
}

.markerpic {
    height: 34rpx;
    background: #fff6ef;
    border: 1rpx solid #ff8722;
    border-radius: 4rpx;
    justify-content: center;
    display: flex;
    align-items: center;
    font-size: 22rpx;
    padding: 0 10rpx;
    width: fit-content;
}

.pages_box view:nth-last-child(3) {
    box-shadow: none;
}

.hr {
    width: 672rpx;
    height: 0;
    border-top: 2rpx solid #dadada;
    margin-top: 20rpx;
}

.userMsg {
    width: 710rpx;
    padding: 0 40rpx 20rpx 50rpx;
}

.msgTie {
    font-size: 32rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 44rpx;
}

.msgText1 {
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 40rpx;
}

.msgText2 {
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 40rpx;
}
</style>
